<template>
	<view class="page">
		<view class="header bk_w">
			<span class="sp_1">我的头像</span>
			<view class="touxiang" @click="xuantouxiang">
			    <image class="img"  src="../img/touxiang1.png" mode="" v-if="this.touxiang"></image>
				 <image class="img" src="../img/touxiang2.png" mode="" v-if="this.touxiang==false"></image>
			</view>
		</view>
		<view class="box bk_w" style="padding-top: 50rpx;">
			<label class="left">昵称 <span style="color: red;">*</span>  </label>
			<input class="right_inp" v-model="nicheng" type="text" placeholder="请输入昵称" />
		</view>
		<view class="box bk_w" >
			<label class="left">个性签名</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="(选填)" />
		</view>
		<view class="box bk_w" >
			<label class="left">性别</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="(选填)" />
		</view>
		<view class="box bk_w" >
			<label class="left">生日</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="(选填)" />
		</view>
		<view class="box bk_w" >
			<label class="left">邮箱</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="请输入邮箱" />
		</view>
		<view class="box bk_w" >
			<label class="left">职业</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="(选填)" />
		</view>
		<view class="box bk_w" >
			<label class="left">教育经历</label>
			<input class="right_inp" v-model="qianming" type="text" placeholder="(选填)" />
		</view>
		
		<uni-popup ref="prop" type="center" style="border-radius: 26rpx;">
			 <view class="prop">
			 	<image class="img" @click="girl()"  src="../img/touxiang1.png" mode=""></image>
				<image class="img" @click="man()" src="../img/touxiang2.png" mode=""></image>
			 </view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nicheng:'',
				qianming:'',
				touxiang:true,
			}
		},
		methods: {
			xuantouxiang(){
				this.$refs.prop.open('center')
			},
			girl(){
				this.touxiang=true,
				this.$refs.prop.close()
			},
			man(){
				this.touxiang=false,
				this.$refs.prop.close()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.page{
	width: 100vw;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: auto;
	background-color: #EAEAEA;
	
	.bk_w{
		background-color: #fff;
	}
	.header{
		height: 160rpx;
		.sp_1{
			width: 140rpx;
			height: 28rpx;
			font-size: 28rpx;
			display: inline-block;
			margin-top: 66rpx;
			margin-left: 40rpx;
		}
		.touxiang{
			display: inline-block;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			// background-color: #1677FF;
			float: right;
			margin-right: 60rpx;
			margin-top: 30rpx;
			.img{
				width: 130rpx;
				height: 130rpx;
			}
		}
	}
	.box{
		height:108rpx;
		line-height: 108rpx;
		.left {
			float: left;
			margin-left: 40rpx;
			font-size: 30rpx;
		}
		.right_inp{
			float: right;
			margin-top: 30rpx;
			width: 260rpx;
		}
	}
 
	.prop{
			width: 615rpx;
			height: 70vh;
			margin: 0 auto;
			border-radius: 26rpx;
			background-color: #ffffff;
			position: relative;
			
		.img{
			width: 250rpx;
			height: 250rpx;
			margin: 20rpx;
		}
	} 
}
</style>
